<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <style>
      .settings-section {
        margin-bottom: 12px;
        background-color: white;
        border-radius: 12px;
        overflow: hidden;
      }

      .settings-header {
        padding: 12px 16px;
        font-size: 14px;
        color: #666;
        background-color: #f5f5f5;
      }

      .settings-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f0;
      }

      .settings-item:last-child {
        border-bottom: none;
      }

      .settings-left {
        display: flex;
        align-items: center;
      }

      .settings-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        color: white;
        font-size: 16px;
      }

      .settings-blue {
        background-color: #007aff;
      }

      .settings-green {
        background-color: #34c759;
      }

      .settings-red {
        background-color: #ff3b30;
      }

      .settings-orange {
        background-color: #ff9500;
      }

      .settings-purple {
        background-color: #af52de;
      }

      .settings-gray {
        background-color: #8e8e93;
      }

      .settings-label {
        font-size: 16px;
        color: #333;
      }

      .settings-value {
        color: #999;
        font-size: 14px;
        margin-right: 8px;
      }

      .settings-arrow {
        color: #ccc;
      }

      .settings-toggle {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 28px;
      }

      .settings-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .settings-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 28px;
      }

      .settings-slider:before {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
      }

      input:checked + .settings-slider {
        background-color: #34c759;
      }

      input:checked + .settings-slider:before {
        transform: translateX(22px);
      }

      .settings-edit-btn {
        display: block;
        width: calc(100% - 32px);
        margin: 24px 16px;
        background-color: #ff3b30;
        color: white;
        text-align: center;
        padding: 12px 0;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
      }

      .settings-version {
        text-align: center;
        padding: 16px;
        color: #999;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 顶部导航 -->
      <div
        class="flex justify-between items-center px-4 py-2 bg-white sticky top-0 z-10"
      >
        <div class="flex items-center">
          <a href="#" class="text-blue-500">
            <i class="fas fa-chevron-left text-blue-500 mr-4"></i>
          </a>
          <div class="text-xl font-semibold">设置</div>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content bg-gray-50 pb-20">
        <!-- 账号设置 -->
        <div class="settings-section mx-4 mt-4">
          <div class="settings-header">账号设置</div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-blue">
                <i class="fas fa-user"></i>
              </div>
              <div class="settings-label">个人资料</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-orange">
                <i class="fas fa-lock"></i>
              </div>
              <div class="settings-label">账号安全</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-green">
                <i class="fas fa-users"></i>
              </div>
              <div class="settings-label">家庭共享</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>

        <!-- 隐私设置 -->
        <div class="settings-section mx-4 mt-4">
          <div class="settings-header">隐私设置</div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-purple">
                <i class="fas fa-eye-slash"></i>
              </div>
              <div class="settings-label">隐私控制</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-red">
                <i class="fas fa-shield-alt"></i>
              </div>
              <div class="settings-label">安全中心</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-blue">
                <i class="fas fa-fingerprint"></i>
              </div>
              <div class="settings-label">生物认证</div>
            </div>
            <div class="settings-toggle">
              <input type="checkbox" checked />
              <span class="settings-slider"></span>
            </div>
          </div>
        </div>

        <!-- 通知设置 -->
        <div class="settings-section mx-4 mt-4">
          <div class="settings-header">通知设置</div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-blue">
                <i class="fas fa-bell"></i>
              </div>
              <div class="settings-label">应用通知</div>
            </div>
            <div class="settings-toggle">
              <input type="checkbox" checked />
              <span class="settings-slider"></span>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-green">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="settings-label">邮件通知</div>
            </div>
            <div class="settings-toggle">
              <input type="checkbox" />
              <span class="settings-slider"></span>
            </div>
          </div>
        </div>

        <!-- 应用设置 -->
        <div class="settings-section mx-4 mt-4">
          <div class="settings-header">应用设置</div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-blue">
                <i class="fas fa-language"></i>
              </div>
              <div class="settings-label">语言</div>
            </div>
            <div>
              <span class="settings-value">简体中文</span>
              <i class="fas fa-chevron-right settings-arrow"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-gray">
                <i class="fas fa-moon"></i>
              </div>
              <div class="settings-label">暗黑模式</div>
            </div>
            <div class="settings-toggle">
              <input type="checkbox" />
              <span class="settings-slider"></span>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-orange">
                <i class="fas fa-database"></i>
              </div>
              <div class="settings-label">存储管理</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-green">
                <i class="fas fa-sync-alt"></i>
              </div>
              <div class="settings-label">自动更新</div>
            </div>
            <div class="settings-toggle">
              <input type="checkbox" checked />
              <span class="settings-slider"></span>
            </div>
          </div>
        </div>

        <!-- 支持与反馈 -->
        <div class="settings-section mx-4 mt-4">
          <div class="settings-header">支持与反馈</div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-blue">
                <i class="fas fa-question-circle"></i>
              </div>
              <div class="settings-label">帮助中心</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-green">
                <i class="fas fa-headset"></i>
              </div>
              <div class="settings-label">联系客服</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-orange">
                <i class="fas fa-comment-alt"></i>
              </div>
              <div class="settings-label">反馈建议</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-red">
                <i class="fas fa-star"></i>
              </div>
              <div class="settings-label">给我们评分</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>

        <!-- 关于 -->
        <div class="settings-section mx-4 mt-4">
          <div class="settings-header">关于</div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-blue">
                <i class="fas fa-info-circle"></i>
              </div>
              <div class="settings-label">关于我们</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-gray">
                <i class="fas fa-file-alt"></i>
              </div>
              <div class="settings-label">用户协议</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="settings-item">
            <div class="settings-left">
              <div class="settings-icon settings-gray">
                <i class="fas fa-shield-alt"></i>
              </div>
              <div class="settings-label">隐私政策</div>
            </div>
            <div class="settings-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>

        <!-- 退出登录 -->
        <button class="settings-edit-btn">退出登录</button>

        <div class="settings-version">应用商城 v2.5.1 (25010)</div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-comment-dots"></i>
          <span>消息</span>
        </div>
        <div class="tab-item active">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="../js/main.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 设置切换功能
        const toggles = document.querySelectorAll(".settings-toggle input");
        toggles.forEach(toggle => {
          toggle.addEventListener("change", function () {
            // 这里可以添加设置改变的逻辑
            const settingItem = this.closest(".settings-item");
            const settingLabel =
              settingItem.querySelector(".settings-label").textContent;
            console.log(
              `设置 "${settingLabel}" ${this.checked ? "已开启" : "已关闭"}`
            );
          });
        });

        // 退出登录按钮
        const logoutBtn = document.querySelector(".settings-edit-btn");
        logoutBtn.addEventListener("click", function () {
          if (confirm("确定要退出登录吗？")) {
            alert("您已成功退出登录");
          }
        });
      });
    </script>
  </body>
</html>
